<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单练习</title>
		
		<!--引入外部第三方css文件
		.min意识是最小文件，压缩的（把文件所有内容换行和空格缩进都去掉），
		文件相对比较小-->
		<link rel="stylesheet" href="css/bootstrap.min.css"/>
		
	</head>
	<body>
		<div class="container">
			<h1>学生信息管理系统mis</h1>
		
		<div class="form-group">
			<!--lable标签 for属性可以光标定位，点击后可以对应id的框-->
			<label for="name">姓名：</label>
			
			<!--文本输入框-->
			<input type="text" name="name" id="name"
			class="form-control"
			  placeholder="请输入姓名..." 
			/>
			</div>
       <div class="form-group">
		   <label for="age">年龄： </label>
		   <input type="number" name="age" id="age"  
		   class="form-control"
		   placeholder="请输入年龄..."/>
	   </div >
	   
	   <div class="form-group">
		   <label for="sex">性别：</label>
		   
		   <!--radio互斥，同名的话只能选择一个-->
		   <div class="radio-inline">
		   <input  type="radio" name="sex" id="sex" checked="checked" />男
		   </div>
		   <div class="radio-inline">
		   <input  type="radio" name="sex" id="sex" />女
		   </div>
	   </div>
		 
		 <div class="form-group">
		 	<label for="hobby">爱好： (多选)</label>
			
			<div class="checkbox-inline">
			<input type="checkbox" name="hobby" id="hobby" />篮球
			</div>
			<div class="checkbox-inline">
		   <input type="checkbox" name="hobby" id="hobby"/>羽毛球
		   </div>
		   <div class="checkbox-inline">
		    <input type="checkbox" name="hobby" id="hobby" />唱歌
			</div>
			<div class="checkbox-inline">
		    <input type="checkbox" name="hobby" id="hobby" />其他
			</div>
		 </div>
		 
		 <div class="form-group">
		 	<label for="edu">学历: (下拉框)</label>
			
			<!--单选，选择“幼儿园”，表单提交value值“1”，性能高-->
			<select name="edu" id="edu">
				<option value ="0" selected="selected">请选择</option>
				<option value="1">幼儿园</option>
				<option value ="2">小学</option>
				<option value="3">初中</option>
				<option value ="4">高中</option>
				<option value="5">本科</option>
				<option value="6">研究生</option>
		        <option value ="7">博士</option>		
			</select>
		 </div>
		 <!--class属性支持多个样式，样式之间空格隔开-->
		 <div class="form-group">
		 	<input class="btn btn-primary" type="button" name="submit" value="保存"/>
		    <button class="btn btn-danger" name="button">取消</button>
		 </div>
		 
		</div>
		
	</body>
</html>
